/*
 * @Description: 修改库弹窗
 * @Author: Zzt
 * @Date: 2022-10-27 16:35:17
 * @LastEditTime: 2022-10-28 18:39:03
 */
import { Button, Form, Input, Modal } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { useLIBManageContext } from '../../contexts/LIBManageContext';
import styles from '../../styles/LIBManage.module.scss';
import classNames from 'classnames/bind';
import { useEffect } from 'react';
const cx = classNames.bind(styles);

interface IEditLibraryProps {
  visible: boolean;
  onClose: any;
  data: any;
}
const EditLibrary = (props: IEditLibraryProps) => {
  const { editLIBManage } = useLIBManageContext();
  const { visible, onClose, data } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(data);
  }, [visible]);
  /**
   * @description 提交表单,触发onFinish方法
   */
  const submitFunc = () => {
    form.submit();
  };
  const onFinish = (value: any) => {
    editLIBManage({ ...data, ...value });
    console.log(value, '新增');
    form.resetFields();
    onClose();
  };
  return (
    <>
      <Modal
        visible={visible}
        title="库管理"
        onCancel={onClose}
        footer={[
          <div key="backSubmit">
            <Button key="back" onClick={onClose}>
              取消
            </Button>
            <Button key="submit" type="primary" onClick={() => submitFunc()}>
              保存
            </Button>
          </div>
        ]}
      >
        <Form
          form={form}
          onFinish={onFinish}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          labelAlign={'left'}
        >
          <p className={cx('form-p')}>库创建后将不能修改</p>
          <Form.Item label="库的名字" rules={[{ required: true }]} name="description">
            <Input placeholder="请输入表描述（小于6位）"></Input>
          </Form.Item>
          <Form.Item label="库的表名" required name="name">
            {/* <Input placeholder="请输入表名（英文）"></Input> */}
            {data?.name}
          </Form.Item>
          <Form.Item label="库的使用说明" name="LIBExplain">
            <TextArea placeholder="请输入库的使用说明"></TextArea>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export default EditLibrary;
